<template>
    <div class="all">
        <div class="top">
            <table>
                <tbody>
                    <tr>
                        <td>服务时间</td>
                        <td>
                            
                            {{ obj.serviceTime }}</td>
                    </tr>
                    <tr>
                        <td>服务地点</td>
                        <td>{{ obj.location }}</td>
                    </tr>
                    <tr>
                        <td>服务内容</td>
                        <td>{{ obj.content }}</td>
                    </tr>
                    <tr>
                        <td>服务照片</td>
                        <td>
                            <span v-for="(file, index) in obj.photos">
                                <van-image width="100" height="100" :src="file.content || file.url" />
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>服务时长</td>
                        <td>{{ obj.duration }}</td>
                    </tr>
                    <tr>
                        <td>纪实时间</td>
                        <td>{{ obj.recordTime }}</td>
                    </tr>
                    <tr>
                        <td>审核状态</td>
                        <td><span>{{ obj.status }}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bottom">
            <h3>感谢您的服务，请收下服务积分</h3>
            <p>{{obj.actpoint}}分</p>
        </div>
    </div>
</template>
<script setup>
import { getMyservicesByid } from '@/api/volunteerApi';
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
let route=useRoute()
let obj=ref({})
// let list = ref([
//     {
//         id:1,   //活动id
//         source:'某某志愿者服务中心',//活动来源
//         serviceTime: '2025-5-27 ',       // 服务时间(格式建议:YYYY-MM-DD )
//         location: '中山公园',          // 服务地点(字符串)
//         content: '参与马拉松志愿服务，及时清理垃圾，不让路边的花海受到污染，确保了比赛生态文明安全',           // 服务内容(文本描述)
//         photos: [],            // 服务照片(数组存储URL)
//         duration: 5,           // 服务时长(单位:小时，数字类型)
//         recordTime: new Date('yyyy-MM-DD HH:mm'),// 纪实时间(默认当前时间)
//         status: '审核中'      // 审核状态(审核驳回/审核中/审核通过)
//     }
// ])
onMounted(async ()=>{
    let id=route.params.id||0
    console.log(id);    
    obj.value=await getMyservicesByid(id)
    console.log(obj);    
    // console.log(obj.value.serviceTime);    
})
</script>
<style scoped>
.all{
    width: 100%;
    height: 100%;
    background-color: var(--bg-accent);
}
.top{
    background-color: var(--white);
    display: flex;
    justify-content: center;
}
table{
    width: 90%;
    background-color: var(--white);
    margin-top: 10px;
    border-radius: var(--radius-medium);
}
td{
    padding: 15px 0px;
    border-bottom: 1px solid var(--border-light);
}
tr:last-child>td{
    border: 0px;
}
tr>td:nth-child(1){
    width: 30%;
    color: var(--text-primary);
    font-weight: 500;
}
tr>td:nth-child(2){
    width: 70%;
    padding-left: 5px;
    color: var(--text-secondary);
}
/* 修改上传图片的样式间距等 */
tr:nth-child(4)>td{
    padding: 0;
}
tr:nth-child(4)>td span{
    margin-right: 10px;
}
/* 审核状态的样式边框 */
tr:last-child>td:last-child span{
    display: inline-block;
    border-radius: var(--radius-xl);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--accent-color);
    color: var(--white);
    font-size: var(--font-sm);
    font-weight: 500;
}
.bottom{
    height: 100px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.bottom h3 {
    color: var(--text-primary);
    font-size: var(--font-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}
.bottom p{
    margin-top: 10px;
    color: var(--primary-color);
    font-size: var(--font-xl);
    font-weight: 600;
}
</style>